CSS 居中

CSS 居中
- 2
- 1

2

水平居中: 运用两个css属性即可： text-align：center 和 margin：0 auto。

html代码如下： <body>

</body> 第一种仅仅实现图片和文字居中于div中，css代码如： div{ width：800px; text-align:center; } 第二种：实现div居中于浏览器且图片和文字居中于div css代码如： body{ text-align:center; } div{ width:800px; margin:0 auto; } 第三种：实现div居中于浏览器但图片和文字不居中于div css代码如： body{ text-align:center; } div{ width:800px; margin:0 auto; text-align:left; } 垂直居中：（本想自己写个，但发现原来网上已有很好的教程，所以转载了个）该CSS垂直居中的条件: 1.已有一个已定义高度的容器(如

) 2.内部有一个未知高度的对象(也许是后台动态生成的文本，放在另一个

中) 3.我想让内部的对象在容器内垂直居中。 4.不使用HTML的表格(table元素)，也不使用Javascript。该CSS垂直居中的方法: 最大的问题:IE浏览器的Bug。大部分浏览器能理解CSS中的display:table之类的表格方式声明，但IE7及其以下的旧版IE无法理解这个声明。解决办法:让大部分能理解display:table声明的浏览器使用vertical-align属性达到垂直居中，让IE7及以下版本用自己理解高度的Bug来解决居中问题。 IE Bug:　 IE7及以下版本理解高度的Bug:如果a容器内有b对象，a容器并没有设置高度值，如果b对象有实际内容(如文字)，那么就会将a的高度理解为与b相等。那么如果对b采取相对定位，b就会相对于在a中的原始位置移动(主要利用百分比高度)。 eg:a未定义高度，b的高度为100px，将b相对定位，并设top:-50% 在这种情况下:标准浏览器由于未知a的高度,所以b不动。而IE7及以下版本则会让b相对a的高度(其实等于b 的高度)上移50%，也就是50px 。如何仅让IE7及以下版本理解对它们的声明？ 1.Pixy曾发明underscore hack，就是在每个CSS属性前加一个下划线”_”，这个hack是专门针对IE6及以下版本的，也就是说IE7无法理解。如:_position:absolute; 所以这种hack就PASS! 2.在属性前加”#”的声明正好可以仅让IE7及以下版本理解，而其它任何浏览器都无法理解这个”#”，所以”#”后的声明就会被其它浏览器忽略掉。 OK~~就这个！兼容性: 目前为止兼容直到IE8.x的所有IE浏览器、Gecko核心浏览器(Mozilla,Firefox,Netscape 7)、Opera 7、Webkit核心浏览器(Safari及Google Chrome)。代码: CSS部分:

#outer { display:table; height:400px; #position:relative; overflow:hidden; } #middle { display:table-cell; vertical-align:middle; #position:absolute; #top:50%; } #inner { #position:relative; #top:-50%; }

XHTML部分:

<!–这里是要垂直居中的内容 –>

经测试，该方法也适用于图片垂直居中，建议大家在使用的时候定义好outer层的宽度。垂直居中方法转载自：http://blog.bingo929.com/css-vertical-center.html

1

<html>

    <head>
        <meta charset="utf-8" />
        <title>Hello</title>
        <style type="text/css">
            body {
                margin:0;
                border:0;
                background-color:#404040 ;
                text-align:center ;
            }
            .container{
                position:relative ;
                margin:0 auto ;
                text-align:left ;
                width:800px ;
            }
            .content{
                background-color:white ;
            }
            .banner{
                position:absolute;
                //top:96%;
                width:100%;
                //margin:0 auto ;
                //float:center;
                //background-color:gray;
                text-align:center ;
            }
            p{
                background-color:gray;
            }
            input{
                width:120;
                text-align:center;
            }
        </style>
        <script type="text/javascript" src="E:/web/doc/jquery-1.7.1.js"></script>
        <script type="text/javascript" src="me.js"></script>
    </head>

    <body>
        <div class="container">
            <div class="content">
                <p>Hello, World!</p>
                <p>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                Hello, World!<br>
                </p>
                <input type="button" value="Next red" /><br>
                <img src="d:\\OpenCV24\\doc\\lena.jpg" />
            </div>
        <div class="banner">
            CopyRight 2012 Adou , All Rights Reserved .
        </div>
        </div>
        <ul>
            <li style="display:inline">1</li>
            <li style="display:inline">2</li>
            <li style="display:inline">3</li>
            <li style="display:inline">4</li>
            <li style="display:inline">5</li>
        </ul>

    </body>

</html>